import {
  DrawerForm,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import React from 'react';
import * as api from '@/services/cdnDomain';
import { ProFormSelect, ProFormSwitch } from '@ant-design/pro-components';
import { useModel } from 'umi';

type FormProps = {
  open: boolean;
  current: API.CdnDomain | undefined;
  onCancel: () => void;
  onSubmit: (values: API.CdnDomain) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { open, current, onCancel, onSubmit } = props;
  if (!open) {
    return null;
  }

  const {
    getCdnAccountOptions,
  } = useModel('useGlobalModel', (model) => ({
    getCdnAccountOptions: model.getCdnAccountOptions,
  }));


  // const loadDataAreas = async () => {
  //   const result = await api.list(null, null, null);

  //   let options = [];
  //   if (result && result.success) {
  //     for(let item of result.data){
  //       options.push({label:item.name, value: item.id});
  //     }
  //   }

  //   return options;
  // };

  return (
    <DrawerForm<API.CdnDomain>
      open={open}
      initialValues={current}
      title={`${current ? '编辑' : '添加'}CDN域名`}
      width={1000}
      onFinish={onSubmit}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
    >
      <ProFormSelect
        name="cdnAccountId"
        label="所属CDN帐号"
        rules={[{ required: true, message: '请选择所属CDN帐号' }]}
        options={getCdnAccountOptions()}
      />
      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormTextArea 
        name="originPrivateKey" 
        label="源服务器私钥" 
        fieldProps={{ rows: 10 }}
      />
      <ProFormTextArea 
        name="originPublicKey" 
        label="源服务器公钥" 
        fieldProps={{ rows: 10 }}
      />
      <ProFormSwitch
        name="status"
        label="状态"
        fieldProps={{
          defaultChecked: true,
        }}
        initialValue={true}
      />
      <ProFormTextArea 
        name="remark" 
        label="备注" 
      />
    </DrawerForm>
  );
};

export default Form;
